<template>
	<view class="warp-personal">
		<view class="personal-container u-flex">
			<view class="item u-flex u-row-between">
				<view class="title">头像</view>
				<view class="content">
					<u-image :src="vuex_userInfo.imageUrl? vuex_userInfo.imageUrl: avatar" height="40px" width="40px" shape="circle"></u-image>
				</view>
			</view>
			<view class="item can u-flex u-row-between" @click="onItemClick">
				<view class="title">昵称</view>
				<view class="content u-flex">
					<view style="color: #000000;">{{vuex_user}}</view>
					<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
				</view>
			</view>
			<!-- TODO 下个版本再说 -->
<!-- 			<view class="item u-flex u-row-between">
				<view class="title">自我介绍</view>
				<view class="content">
					<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
				</view>
			</view> -->
			<view class="item can u-flex u-row-between" @click="onSexClick">
				<view class="title">性别</view>
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
				<view class="content u-flex">
					<template v-if="vuex_userInfo.sex == 1">
						<u-image :src="man" height="20px" width="20px"></u-image>
						<view style="margin-left: 15rpx;">男生</view>
						<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
					</template>
					<template v-if="vuex_userInfo.sex == 0">
						<u-image :src="woman" height="20px" width="20px"></u-image>
						<view style="margin-left: 15rpx;">女生</view>
						<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
					</template>
					<!-- <u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon> -->
				</view>
			</view>
			<view class="item can u-flex u-row-between" @click="onSchoolClick">
				<view class="title">学校</view>
				<view class="content u-flex">
					<view>{{vuex_userInfo.school}}</view>
					<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
				</view>
			</view>
			<view class="item can u-flex u-row-between" @click="onGradeClick">
				<view class="title">年级</view>
				<view class="content u-flex">
					<view>{{vuex_userInfo.grade}}</view>
					<u-icon name="arrow-right" color="#bcbcbc" class="icon"></u-icon>
				</view>
			</view>
			<view class="info u-flex">
				<u-icon name="info-circle-fill" size="28" color="#999"></u-icon>
				<view class="content">点击相应词条修改头像信息,年级,性别！</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 * 作者: 臧锡洋
	 * 时间: 2020年10月29日 22:49:39
	 * 版本: V1
	 * 描述: 小程序功能页面 - 个人中心
	 */
	export default {
		data() {
			return {
				avatar: require('../../../static/carry-inner-icon/my_no_login_icon.png'),
				//性别
				sex: 'man',
				man: require('../../../static/carry-inner-icon/home-item/icon_sex_man.png'),
				woman: require('../../../static/carry-inner-icon/home-item/icon_sex_woman.png'),
				show:false,
				list:[
					{
						value: 1,
						label: '男'
					},
					{
						value: 0,
						label: '女'
					}
				],
				userInfo:{}
			}
		},
		methods: {
			onItemClick(){
				uni.navigateTo({
					url: '../updateInfo/updateInfo'
				});
			},
			onSchoolClick(){
				uni.navigateTo({
					url: '../updateSchool/updateSchool'
				});
			},
			onGradeClick(){
				uni.navigateTo({
					url: '../updateGrade/updateGrade'
				});
			},
			//点击性别栏弹出选项
			onSexClick(){
				this.show=true;
			},
			//多选器做出选择
			confirm(e){
				// 进行提交
					let param = {
						grade: this.userInfo.grade.substr(0, this.userInfo.grade.length - 1),
						phone: this.userInfo.phone,
						school: this.userInfo.school,
						sex: e[0].value,
						nikeName: this.vuex_user
					}
					this.$u.api.updateinfo(param).then(res => {
						this.$u.vuex('vuex_userInfo.sex', e[0].value)
						uni.showModal({
							title: '提示',
							content: "性别修改成功!",
							showCancel: false,
							success: () => {
								uni.reLaunch({
									url: '../../tabPages/my' //重载到我的
							})
							
						}
					})
				})
			}
		},
		mounted() {
			// 设置页面的背景颜色
			uni.setBackgroundColor({
				backgroundColor: '#ffffff'
			});
			
			this.userInfo = this.vuex_userInfo;
		},
		computed:{
			
		}
	}
</script>

<style>
	html {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.personal-container {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		.item {
			box-sizing: border-box;
			padding: 30rpx 10rpx;
			height: 120rpx;
			width: 100%;
			border-bottom: 1px solid #eee;
			color: #999999;
			.title {
				margin-left: 20rpx;
			}
			.content {
				margin-right: 20rpx;
				.icon{
					margin-left: 15rpx;
				}
			}
			&.can{
				color: #000;
			}
			// item点击反馈
			&.can:active{
				background-color: #f8f8f8;
			}
		}
		.info{
			margin: 20rpx 30rpx;
			.content{
				color: #999;
				font-size: 13px;
				margin-left: 10rpx;
			}
		}
	}
</style>
